<template>
  <div class="pptp relative">
    <page-loading></page-loading>
    <template v-for="(item, idx) in fields">
      <os-switch :item="item.label" v-model="values[idx]" v-if="item.type=='switch'" :key="idx"></os-switch>
      <os-input :item="item.label" v-model="values[idx]" v-else :key="idx"></os-input>
    </template>
    <div class="value alone-right mb20">
      <div class="btn btn-blue" @click="set_pptp">{{$t("btn.save")}}</div>
    </div>
    <os-table :info="info" :list="status?[status]:status" :map="map"></os-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      values: ["0", "", "", "", "0",],
      fields: this.$t("service.pptp.fields"),
      info: this.$t("service.pptp.info"),
      timer: null,
      status: null,
      map: ['ip', 'rx', 'tx', 'uptime',],
    }
  },
  methods: {
    get_pptp() {
      this.$req.get("/webapi?op=get_l2tp_msg").then(res=> {
        this.values = this.obj_to_arr(res, ['enabled', 'server', 'username', 'password', 'defaultroute'])
        console.log(this.values)
      })
    },
    set_pptp() {
      let params
      params = this.arr_to_obj(this.values, ['enabled', 'server', 'username', 'password', 'defaultroute'])
      params.proto = "l2tp"
      console.log(params)
      this.proxy_req("post", "/webapi?op=set_l2tp", params, this.get_l2tp, true)
    },
    get_status() {
      this.$req.get("/webapi?op=get_l2tp_status").then(res=> {
        Object.assign(res, {
          ip: res.l2tp_ip,
          rx: this.formatValue(this.formatByte(res.l2tp_rx)),
          tx: this.formatValue(this.formatByte(res.l2tp_tx)),
          uptime: this.formatDuration(res.l2tp_uptime),
        })
        this.status = res
        console.log(this.status)
      })
    }
  },
  created() {
    this.$bus.emit("changeTab", 7),
    this.get_pptp()
    this.get_status()
    this.timer = setInterval(()=> {
      this.get_status()
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
</style>
